<template>
  <div class="inspection-member">
    <div class="header">
      <TitleName name="巡检成员" />
      <el-form
        :inline="true"
        :model="formData"
        size="large"
        class="demo-form-inline"
      >
        <el-form-item label="巡检成员：">
          <el-select
            class="one-sel"
            v-model="formData.region"
            placeholder="请选择巡检成员"
            clearable
          >
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button class="search" type="primary" @click="search"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
      <div class="btn-wrap">
        <button class="plus" @click="plusGroup">新增成员</button>
        <button class="update" @click="updateGroup">修改成员</button>
        <button class="del" @click="delGroup">删除成员</button>
      </div>
    </div>
    <div class="table-wrap">
      <el-table
        :data="tableData"
        max-height="475"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" />
        <el-table-column align="center" property="name" label="巡视人员" />
        <el-table-column align="center" property="name" label="巡视组别" />
      </el-table>
      <div style="padding-top: 15px">
        <Pagination
          @getDataList="getDataList"
          :pageSize="pageSize"
          :total="total"
          :currentPage="currentPage"
        />
      </div>
    </div>
    <Dialog class="dialog" top="22vh" :title="title" v-model:visible="showDia">
      <template #content>
        <el-form :model="diaFormData" size="large">
          <el-form-item label="巡视组名：" v-if="title == '新增成员'">
            <el-col :span="17">
              <el-input v-model="diaFormData.name"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="巡视人员：" v-if="title == '新增成员'">
            <el-col :span="17">
              <el-input v-model="diaFormData.name"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="巡视组名：" v-else>
            <el-col :span="17">
              <el-select class="one-sel" v-model="formData.name" clearable>
                <el-option label="Zone one" value="shanghai" />
                <el-option label="Zone two" value="beijing" />
              </el-select>
            </el-col>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <div class="btn-wrap">
          <button class="cancel" @click="diaCancel">取消</button>
          <button class="sure" @click="diaSure">确定</button>
        </div>
      </template>
    </Dialog>
  </div>
</template>
<script setup lang="ts">
import TitleName from "../../components/TitleName.vue";
import { ref, reactive } from "vue";
let formData = reactive({});
let diaFormData = reactive({});
let pageSize = ref("");
let total = ref(111);

let title = ref("新增成员");
let currentPage = ref("");
let showDia = ref(false);
let tableData = reactive([
  { name: "一班" },
  {},
  {},
  { name: "一班" },
  { name: "一班" },
  { name: "一班" },
  { name: "一班" },
  { name: "一班" },
  { name: "一班" },
  { name: "一班" },
]);
const search = () => {};
const diaCancel = () => {
  showDia.value = false;
};
const handleSelectionChange = () => {};
const getDataList = () => {};
const plusGroup = () => {
  showDia.value = true;
  title.value = "新增成员";
};
const updateGroup = () => {
  showDia.value = true;
  title.value = "修改成员";
};
const delGroup = () => {};
</script>
<style scoped lang="scss">
.inspection-member {
  height: 100%;
  padding: 15px 17px 17px 12px;
  .dialog {
    .el-form {
      margin-left: 32px;
      margin-top: 50px;
    }
    .btn-wrap {
      display: flex;
      justify-content: center;
      margin-top: 160px;
      margin-bottom: 50px;
      button {
        width: 109px;
        height: 51px;
        background: #d73d32;
        border-radius: 5px;
        font-size: 24px;
        font-weight: 500;
        color: #ffffff;
      }
      .cancel {
        background: #d73d32;
      }
      .sure {
        margin-left: 25px;
        background: #0250f9;
      }
    }
  }
  .table-wrap {
    margin-top: 15px;
    width: calc(100vw - 175px);
    height: calc(100vh - 17px - 227px - 116px);
    box-sizing: border-box;
    background-color: #fff;
    padding: 20px 16px 0 18px;
    :deep(.el-table__body td.el-table__cell) {
      height: 4.61vh;
    }
  }
  .header {
    height: 197px;
    background: #ffffff;
    padding-top: 26px;
    width: calc(100vw - 175px);
    .search {
      width: 100px;
      height: 42px;
      background: #0250f9;
      border-radius: 5px;

      font-size: 22px;
      font-weight: 400;
      color: #ffffff;
    }
    .btn-wrap {
      button {
        margin-left: 19px;
      }
      & button:first-child {
        margin-left: 44px;
      }
      .plus {
        background: #0250f9;
      }
      .del {
        background: #d73d32;
      }
      .update {
        background: #07bd2a;
      }
    }
    .el-form {
      margin-top: 25px;
      padding-left: 19px;
    }
  }
}
</style>
